<template>
    <div style="height: 500px;overflow-y: auto;">
        <!-- 分配权限 -->
        <el-tree :data="data" show-checkbox node-key="id" :default-checked-keys="rolePermissions" :props="defaultProps"
            :default-expand-all="true" @check="checkChange" :check-on-click-node="true" />
    </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue"
import { getRolePermission } from '@/api/permission.js'

const emit = defineEmits(['treeOK'])
const props = defineProps({
    row: {
        type: Object,
        default: () => ({}), // 默认值为一个空对象
    }
})
const defaultProps = {
    children: 'children',
    label: 'name',
}
const data = reactive([])
const rolePermissions = ref([])
const dataList = reactive([])
// 选择
const checkChange = (data, data1) => {
    dataList.length = 0
    dataList.push(...data1.checkedKeys)
    emit('treeOK', dataList)
}
// 获取树结构
const getList = () => {
    data.length = 0
    rolePermissions.value = []
    getRolePermission(props.row.id).then(res => {
        if (res.code == 200) {
            data.push(...res.data.tree)
            rolePermissions.value = res.data.rolePermissions
        }

    })
}
onMounted(() => {
    getList()

})
</script>

<style lang="scss" scoped></style>